<template>
  <!-- 支付宝提现 -->
  <view class="box">
    <view class="tixian1">
      <view class="tixian1-1">￥<text>请输入提现金额</text></view>
      <view class="tixian1-2">提现手续费10%</view>
    </view>
    <view class="tixian2">
      <view class="tixian2-1">提现至</view>
      <view class="tixian2-2">
        <view class="tixian2-2-1" @click="renteyn()">
          <button>微信钱包</button>
          <image src="../../static/微信.png" mode=""></image>
        </view>
        <view class="tixian2-2-2">
          <button>支付宝</button>
          <image src="../../static/支付宝.png" mode=""></image>
        </view>
      </view>
    </view>
    <!-- 支付宝账号 -->
    <view class="tixian3">
      <view class="tixian3-1">填写支付宝账号</view>
      <view class="tixian3-2">
        <uv-input placeholder="请输入姓名" border="surround" v-model="value" @change="change"></uv-input>
      </view>
      <view class="tixian3-3">
        <uv-input placeholder="请输入支付宝账号" border="surround" v-model="value" @change="change"></uv-input>
      </view>

    </view>
    <view class="tibut">
      <button>申请提现</button>
    </view>

  </view>
</template>

<script>
export default {
  data() {
    return {
      value: ''
    }
  },
  methods: {
    change(e) {
      console.log('change', e);
    },
    renteyn(){
      uni.navigateTo({
        url:'/pages/tixian/tixian.vue'
      })
    }
  }
}
</script>

<style lang="scss">
.box {
  width: 100%;
  margin: auto;
  padding-top: 30rpx;
  background-color: #f5f5f5;
}

.tixian1 {
  width: 90%;
  margin: auto;
  margin-bottom: 30rpx;
  border-radius: 10rpx;
  background-color: #fff;

  .tixian1-1 {
    width: 90%;
    margin: auto;
    height: 140rpx;
    line-height: 140rpx;
    border-bottom: 1px solid #dadada;
    font-weight: bold;
    font-size: 35rpx;

    text {
      padding-left: 20rpx;
      font-size: 35rpx;
      color: #a6a6a6;
      font-weight: normal;
    }
  }

  .tixian1-2 {
    width: 90%;
    margin: auto;
    height: 90rpx;
    line-height: 90rpx;
    font-size: 25rpx;
    color: #a6a6a6;
  }
}

.tixian2 {
  width: 90%;
  margin: auto;
  margin-bottom: 30rpx;
  border: 1px solid #fff;
  border-radius: 10rpx;
  background-color: #fff;

  .tixian2-1 {
    width: 90%;
    margin: auto;
    margin-top: 30rpx;
    font-size: 30rpx;
    font-weight: bold;
  }

  .tixian2-2 {
    margin-bottom: 40rpx;
    display: flex;
    justify-content: space-evenly;

    .tixian2-2-1:hover {
      border: 1px solid #fc5a3e;
    }

    .tixian2-2-2:hover {
      border: 1px solid #fc5a3e;
    }

    .tixian2-2-1 {
      width: 45%;
      height: 80rpx;
      margin-top: 40rpx;
      border: 1px solid #ededed;
      border-radius: 10rpx;
      display: flex;
      position: relative;

      image {
        width: 18%;
        height: 30rpx;
        line-height: 30rpx;
        position: absolute;
        left: 50rpx;
        top: 26rpx;
      }

      button:hover {
        background-color: #fff4f2;
      }

      button {
        width: 100%;
        height: 80rpx;
        line-height: 80rpx;
        font-size: 30rpx;
        padding-left: 100rpx;
        background-color: #fff;
      }
    }

    .tixian2-2-2 {
      width: 45%;
      height: 80rpx;
      margin-top: 40rpx;
      border: 1px solid #ededed;
      border-radius: 10rpx;
      display: flex;
      position: relative;

      image {
        width: 15%;
        height: 30rpx;
        line-height: 30rpx;
        position: absolute;
        left: 70rpx;
        top: 26rpx;
      }

      button:hover {
        background-color: #fff4f2;
      }

      button {
        width: 100%;
        height: 80rpx;
        line-height: 80rpx;
        font-size: 30rpx;
        padding-left: 100rpx;
        background-color: #fff;
      }
    }
  }
}

.tibut {
  button {
    width: 90%;
    height: 80rpx;
    margin: auto;
    background-color: #fc4424;
    color: #fff;
    border-radius: 50rpx;
    font-size: 30rpx;
    text-align: center;
  }
}

.tixian3 {
  width: 90%;
  margin: auto;
  margin-bottom: 40rpx;
  border-radius: 20rpx;
  background-color: #fff;

  .tixian3-1 {
    width: 90%;
    margin: auto;
    padding-top: 30rpx;
    font-size: 30rpx;
    font-weight: bold;
    padding-bottom: 30rpx;
  }

  .tixian3-2 {
    width: 90%;
    margin: auto;
  }

  .tixian3-3 {
    width: 90%;
    margin: auto;
    margin-top: 26rpx;
    padding-bottom: 30rpx;
  }
}
</style>